// 获取图片的宽高比
async function getImageAspectRatios(urlList) {
    // 遍历每一个URL
    var promises = urlList.map(url => {
        return new Promise((resolve, reject) => {
            // 接收图片
            var img = new Image();
            // onload加载完成时
            img.onload = function () {
                // 计算图片的宽高比
                var aspectRatio = img.width / img.height;
                // 通过resolve传递
                resolve(aspectRatio);
            };
            // 图片加载发生错误处理
            img.onerror = function () {
                reject(new Error('无法加载图片: ' + url));
            };
            img.src = url;
        });
    });

    try {
        // Promise.all方法将完成的promises存储在aspectRatios变量中
        var aspectRatios = await Promise.all(promises);
        return aspectRatios;
    } catch (error) {
        console.error(error);
    }
}

// 判断是否为长图
async function add(url) {
    // imageUrls变量存储图片URL列表
    var imageUrls = []
    // ar存储获取的图片宽高比
    let ar = []
    // _str存储HTML字符串
    let _str = '';
    // op存储最终结果
    let op = '';
    let uo = '';
    // imageUrls.push(k)
    // for...of循环遍历url并添加到imageUrls中
    for (let k of url) {
        imageUrls.push(k)
    }
    // 判断是否有图片需要继续判断
    if (imageUrls.length > 0) {
        // 调用getImageAspectRatios函数获取图片宽高比存储在ar数组中
        ar = await getImageAspectRatios(imageUrls)
        // 遍历url参数
        for (let i = 0; i < url.length; i++) {
            // 如果> 0.5为空
            uo = ar[i] > 0.5 ? '' : '<div class="img-label">长图</div>';
            _str += `
                <div style="background-image: url('${url[i]}');"class="post-img">
            ${uo}
        </div>`
        }
    } else {
        uo = ''
    }
    return _str
}

// 渲染页面
let page = 0
async function renderPage() {
    page++
    let str = ''
    let params = {
        type: 'all',
        page
    }
    let data = await getData('v2/thread/hotList', params, 'v5Kr2sXPacQXBqiyZcHF4ENteb5EUwwu4T9xqmy1T3H7cfQRPj1xMGyP5qzucqfK')
    console.log(data.data.dataList);
    for (let ele of data.data.dataList) {
        let pictures = await add(ele.smallImages);
        str += `
        <div class="hot-list">
            <div class="post">
                <div class="post-item">
                    <div class="post-button">
                        <div class="button-img">
                            <img src="${ele.userBaseInfo.userAvatar}"
                                alt="">
                        </div>
                        <div class="button-text">
                            <div class="text-top">${ele.userBaseInfo.userName}</div>
                            <div class="text-bottom">
                                <div class="text-bottom-time">
                                ${ele.createTime}
                                    <div class="text-line"></div>
                                    帖子
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="" class="post-text">
                        <div class="post-text-top">${ele.title}</div>
                        <div class="post-text-bottom">${ele.content}</div>
                    </a>
                </div>
                <div class="post-img-box">
                    ${pictures}
                </div>
                <div class="post-phone-box">
                    <span class="post-phone">
                        <img src="https://m.feng.com/assets/forum.3be1de29.svg" alt="">
                        ${ele.relatedTopics[0].topicName}
                    </span>
                </div>
                <div class="post-bottom">
                    <div class="post-bottom-item">
                        <div class="bottom-item-num bottom-item-num01">
                        ${ele.praisedCount}
                        </div>
                        <div class="bottom-item-num bottom-item-num02">
                        ${ele.commentsCount}
                        </div>
                        <div class="bottom-item-num bottom-item-num03">
                        ${ele.collectCount}
                        </div>
                    </div>
                    <div class="post-bottom-item-relay"></div>
                </div>
            </div>
        </div>`
    }

    $('.hot-list-wrapper').append(str);
}

// renderPage();
let _load = true
window.addEventListener('scroll', function () {
    // 检查是否滚动到页面底部
    if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.scrollHeight - 100 && _load) {
        // 在此处加载更多内容
        main();
        setTimeout(() => {
            _load = true;
        }, 2500);
        _load = false;
    }
});



// renderPage();
async function executeAsync() {
    let postImgBox = document.querySelector('.hot-list-wrapper');
    let postImgs = postImgBox.getElementsByClassName('post-img');
    let weifengBox = document.querySelector('.weifeng-box')
    Array.from(postImgs).forEach(function (postImg) {
        postImg.addEventListener('click', function () {
            let backgroundImage = postImg.style.backgroundImage;
            let imageURL = backgroundImage.replace('url("', '').replace('")', '');
            console.log(imageURL);
            let fullscreen = document.createElement('div');
            fullscreen.classList.add('fullscreen');

            // 创建全屏图片元素
            let fullscreenImg = document.createElement('img');
            fullscreenImg.src = imageURL;
            fullscreenImg.classList.add('fullscreen-img');

            // 将全屏图片添加到全屏容器中
            fullscreen.appendChild(fullscreenImg);

            // 添加全屏容器到页面
            weifengBox.appendChild(fullscreen);

            // 点击全屏图片时，隐藏全屏容器
            fullscreen.addEventListener('click', function () {
                fullscreen.style.display = 'none';
            });
        });
    });

}
async function main() {
    await renderPage();
    await executeAsync();
}
main();
